<template>
	<view class="content">
		<view class="conBox">
			<view class="boxItem" v-for="(item,index) in list">
				<view class="title">{{item.name}}</view>
				<view class="navBox">
					<view v-for="(items,indexs) in item.services" style="width: 25%;">
						<view v-if="items.type=='link'||items.type=='url'" class="navItem" @click="goInfo(items)">
							<image :src="imgUrl+items.icon" class="icon" mode="aspectFill"></image>
							<view class="text">{{items.name}}</view>
						</view>
						<view v-if="items.type=='mini'" class="navItem">
							<image :src="imgUrl+items.icon" class="icon" mode="aspectFill"></image>
							<wx-open-launch-weapp
							@launch="handleLaunchFn" 
							class="launch-btn" 
							:appid="item.appid" 
							style="display: block;">
							  <script type="text/wxtag-template">
							      <style>
									  .text{
									  	font-family: PingFangSC, PingFang SC;
									  	font-weight: 400;
									  	font-size: 24rpx;
									  	color: #666666;
									  	line-height: 30rpx;
									  	text-align: center;
									  	font-style: normal;
									  	margin-top: 13rpx;
									  }
							      </style>
								  <view class="text" style="font-family: PingFangSC, PingFang SC;
									  	font-weight: 400;
									  	font-size: 24rpx;
									  	color: #666666;
									  	line-height: 30rpx;
									  	text-align: center;
									  	font-style: normal;
									  	margin-top: 13rpx;">{{items.name}}</view>
							  </script>
							</wx-open-launch-weapp>
						</view>
						
					</view>	
					
				</view>
			</view>
		</view>
		
		<!-- 导航栏 -->
		<tabbar link="/pages/service/service"></tabbar>
	</view>
</template>

<script>
	import tabbar from '../../components/tabbar/tabbar.vue'
	import {integratedList,getJssdk} from '../../common/api.js'
	import request from '../../common/common.js'
	import wx from 'jweixin-module'
	export default {
		components:{tabbar},
		data() {
			return {
				list:[],
				imgUrl:request.imgUrl,
			}
		},
		onLoad() {
			this.getList()
			this.getSdk()
		},
		methods: {
			getSdk(){
				getJssdk({url:location.href.split('#')[0]}).then(res=>{
					if(res.code==10000){
						console.log(res)
						wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: res.data.appId, // 必填，公众号的唯一标识
							timestamp: res.data.timestamp, // 必填，生成签名的时间戳
							nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
							signature: res.data.signature, // 必填，签名，见附录1
							jsApiList: ["wx-open-launch-weapp"], // 必填，需要使用的JS接口列表
							openTagList:['wx-open-launch-weapp'], // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp','wx-open-launch-app']
						})
						wx.ready(res => {
						  console.log('res',res);
						});
						wx.error(res => {
						    console.log('error',res);
						});
					}
				})
			},
			goInfo(item){
				if(item.type=='link'){
					if(!item.url){
						uni.showToast({
							title: '开发中...',
							duration: 2000,
							icon:"none"
						});
						return
					}
					uni.navigateTo({
						url:item.url
					})
					return
				}else if(item.type=='url'){
					if(!item.url){
						uni.showToast({
							title: '开发中...',
							duration: 2000,
							icon:"none"
						});
						return
					}
					window.location.href=item.url
				}else if(item.type=='mini'){
					console.log('小程序')
				}
				
			},
			getList(){
				integratedList({}).then(res=>{
					if(res.code==10000){
						console.log(res)
						this.list = res.data
					}
				})
			},
			handleLaunchFn (e) {
			    console.log('success', e)
			}

		}
	}
</script>

<style>
page{
	background: #EDEFF2;
}
</style>
<style scoped lang="scss">
	.content{
		width: 750rpx;
		padding: 40rpx;
		box-sizing: border-box;
		.conBox{
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 40rpx;
			box-sizing: border-box;
			margin-bottom: 200rpx;
			.boxItem{
				border-bottom: 1rpx solid #F0F0F0;
				margin-bottom: 47rpx;
				.title{
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					line-height: 30rpx;
					text-align: left;
					font-style: normal;
				}
				.navBox{
					margin-top: 47rpx;
					display: flex;
					flex-wrap: wrap;
					.navItem{
						width: 100%;
						margin-bottom: 35rpx;
						.icon{
							width: 93rpx;
							height: 97rpx;
							margin-left: 50%;
							transform: translateX(-50%);
						}
						.text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 30rpx;
							text-align: center;
							font-style: normal;
							margin-top: 13rpx;
						}
					}
				}
			}
		}
	}
</style>
